<template>
    <div class="record-container">
        <div class="record-container__inner">
            
                <homepage-title>

                    <div class="header-container__title">周详的数据分析报表</div>
                    <div class="header-container__brief wow bounceIn">
                        我们抛弃笼统的代理数据分析模型<br/>针对会员的行为动作/留存/转化/来源等方面系统性进行数据统计分析
                    </div>
                </homepage-title>
            <div class="report-center">
                <timeout-cell :time="1600" :iteration="true" class="slideInUp report-center__main"></timeout-cell>
                <timeout-cell :time="2200" :iteration="true" class="report-center-cell report-center-cell--commision slideInUp">
                    <div class="report-center-cell__inner">
                        <div class="report-center-cell__title">
                            01
                        </div>
                        <img src="./img/report-commision.png" alt="">
                        <div class="report-center-cell__brief">
                            佣金概括
                        </div>
                    </div>
                </timeout-cell>
                <timeout-cell :time="2200" :iteration="true" class="report-center-cell report-center-cell--level slideInUp">
                    <div class="report-center-cell__inner">
                        <div class="report-center-cell__title">
                            02
                        </div>
                        <img src="./img/report-level.png" alt="">
                        <div class="report-center-cell__brief">
                            轻松管理下级会员
                        </div>
                    </div>
                </timeout-cell>
                <timeout-cell :time="2200" :iteration="true"  class="report-center-cell report-center-cell--capital slideInUp">
                    <div class="report-center-cell__inner">
                        <div class="report-center-cell__title">
                            03
                        </div>
                        <img src="./img/report-capital.png" alt="">
                        <div class="report-center-cell__brief">
                            详细的资金分析
                        </div>
                    </div>
                </timeout-cell>
                <timeout-cell :time="2200" :iteration="true" class="report-center-cell report-center-cell--retain slideInUp">
                    <div class="report-center-cell__inner">
                        <div class="report-center-cell__title">
                            04
                        </div>
                        <img src="./img/report-retain.png" alt="">
                        <div class="report-center-cell__brief">
                            留存/转化/流失分析
                        </div>
                    </div>
                </timeout-cell>
            </div>

        </div>

    </div>
</template>


<script>
export default {
  name: "record"
};
</script>

<style lang="scss" scoped>
@include b(record-container) {
  height: 100%;
  background: #f6f7f9;
  display: flex;
  justify-content: center;
  @include e(inner) {
    width: 100%;
    @include utils-bg(url("./img/record_bg.png") no-repeat center center);
    position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // flex-flow: column;
  }
  @include b(report-center) {
    @include main-center(1175px);
    position: relative;
    @include e(main) {
      @include utils-bg(
        url("./img/report-center_bg.png") no-repeat center center
      );
      height: 626px;
      overflow: hidden;
      @include main-center(459px);
    }
    @include b(report-center-cell) {
      width: 241px;
      height: 241px;
      border-radius: 50%;
      background: white;
      position: absolute;
      @include e(inner) {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        @include e(title) {
          width: 49px;
          height: 49px;
          line-height: 49px;
          border-radius: 50%;
          position: absolute;
          background: #1e5adc;
          text-align: center;
          color: white;
          left: 50%;
          margin-left: -25px;
          top: -25px;
        }
        @include e(brief) {
          font-size: 18px;
          font-family: "MicrosoftYaHeiUI";
          font-weight: 400;
          color: #696b81;
          margin-top: 32px;
        }
      }
      @include m(commision) {
        left: 20px;
        top: 230px;
      }
      @include m(level) {
        left: 211px;
        bottom: -82px;
      }
      @include m(capital) {
        right: 204px;
        bottom: -82px;
      }
      @include m(retain) {
        right: 0;
        top: 232px;
      }
    }
  }
}
</style>
